<template>
  <div class="appendChatDialog" v-loading="loading">
    <el-dialog
      title="图表设置"
      v-model="visible"
      width="640px"
      :show-close="true"
      @close="Closed()">
      <div class="content">
        <el-form label-position="top" label-width="80px" :model="form" ref="form" :rules="rules">
          <el-form-item label="图表展示类型:" prop="type">
            <el-radio-group v-model="form.type" @change="handleClickChangeChartRadio">
              <!-- <el-radio :label="'miniIndicator'" v-if="reportLinkChart.includes('miniIndicator')">小指标</el-radio> -->
              <el-radio :label="'indicator'" v-if="reportLinkChart.includes('indicator')">指标</el-radio>
              <el-radio :label="'line'" v-if="reportLinkChart.includes('line')">线图</el-radio>
              <el-radio :label="'bar'" v-if="reportLinkChart.includes('bar')">柱图</el-radio>
              <el-radio :label="'ranking'" v-if="reportLinkChart.includes('ranking')">排行</el-radio>
              <el-radio :label="'pie'" v-if="reportLinkChart.includes('pie')">饼图</el-radio>
              <el-radio :label="'table'" v-if="reportLinkChart.includes('table')">表格</el-radio>
              <el-radio :label="'lineTrend'" v-if="reportLinkChart.includes('lineTrend')">指标卡趋势图</el-radio>
              <el-radio :label="'funnel'" v-if="reportLinkChart.includes('funnel')">漏斗图</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="数据展示条数:" v-if="isShowDataNum" prop="size">
            <el-select v-model="form.size" placeholder="请选择" style="width: 120px;">
              <el-option
                v-for="item in showDataOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="卡片布局:" prop="layout">
            <div class="cardSize">
              <div class="cardSize-top">
                <p class="item" v-for="(item, index) in cardOptions" :key="index">
                  <img :class="{'gary': item.isDisabled}" :src="item.img" alt="">
                  <span class="spanRadio">
                    <el-radio v-model="form.layout" :disabled="item.isDisabled" :label="item.label">{{ item.radio }}</el-radio>
                  </span>
                </p>
              </div>
            </div>
          </el-form-item>
          <div class="perch" style="width: 100%;height: 30px;"></div>
        </el-form>
      </div>
      <template #footer>
        <span class="footer">
          <el-button size="mini" @click="Closed">取消</el-button>
          <el-button size="mini" type="primary" @click="handleClickConfirm('form')">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// vuex
import store from "@/store";
// 图片
import minisize from '@/assets/dataCenter/dataBoard_mini.png';
import smallsize from '@/assets/dataCenter/dataBoard_small.png';
import mediumsize from '@/assets/dataCenter/dataBoard_medium.png';

export default {
  name: 'AppendChatDialog',
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    reportLinkChart: {
      type: Array,
      default: () => {
        return [];
      }
    },
    beanName: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  data() {
    return {
      loading: false,
      form: {
        type: '',
        layout: ''
      },
      radio: '1',
      reportOptions: [],
      isShowDataNum: false,
      showDataOptions: [
        {
          value: 1,
          label: 'Top5'
        },
        {
          value: 2,
          label: 'Top10'
        }
      ],
      cardOptions: [
        {
          img: minisize,
          isDisabled: true,
          label: 'mini',
          radio: '小尺寸'
        },
        {
          img: smallsize,
          isDisabled: true,
          label: 'small',
          radio: '中尺寸'
        },
        {
          img: mediumsize,
          isDisabled: true,
          label: 'medium',
          radio: '大尺寸'
        }
      ],
      size: '' | 'large' | 'small'
    }
  },
  watch: {
    visible: {
      handler(val) {
        if(val) {
          this.$nextTick(() => {
            this.$refs.form.resetFields();
            this.cardOptions.forEach(item => {
              item.isDisabled = true;
            })
          })
        }
      }
    }
  },
  mounted() {
   
  },
  methods: {
    // 修饰关闭dialog
    Closed() {
      this.$emit('update:visible', false);
    },
    // 选择图表类型
    handleClickChangeChartRadio(val, layout) {
      // 置空数据
      this.form.layout = null;
      this.isShowDataNum = false;

      if(val === 'indicator' || val === 'miniIndicator') { // 指标
        this.cardOptions.forEach(item => {
          if(item.label === 'mini') {
            item.isDisabled = false;
          } else {
            item.isDisabled = true;
          }
        })
        // 默认选中
        this.form.layout = 'mini';
      } else if(val === 'line' || val === 'bar' ) { // 线图
        this.cardOptions.forEach(item => {
          if(item.label === 'mini') {
            item.isDisabled = true;
          } else {
            item.isDisabled = false;
          }
        })
        // 默认选中
        this.form.layout = 'small';
      } else if(val === 'ranking' || val === 'pie' || val === 'funnel') {
        this.isShowDataNum = true;
        this.cardOptions.forEach(item => {
          if(item.label === 'mini') {
            item.isDisabled = true;
          } else {
            item.isDisabled = false;
          }
        })
        // 默认选中
        this.form.layout = 'small';
      } else if(val === 'table') {
        this.cardOptions.forEach(item => {
          if(item.label === 'mini') {
            item.isDisabled = true;
          } else {
            item.isDisabled = false;
          }
        })
        // 默认选中
        this.form.layout = 'small';
      } else {
        this.cardOptions.forEach(item => {
          if(item.label === 'medium') {
            item.isDisabled = false;
          } else {
            item.isDisabled = true;
          }
        })
        // 默认选中
        this.form.layout = 'medium';
      }
      // 编辑时默认选中
      if(layout) {
        // 默认选中
        this.form.layout = layout;
      }
    },
    // 是否保留时间维度
    handleChangeTimeValue(val) {
      if(val) {
        this.form.isTiDime = 1;
      } else {
        this.form.isTiDime = 0;
      }
    },
    // 确定
    handleClickConfirm() {
      if(this.form.type === '') {
        this.$message.warning('请选择图表展示类型');
        return false;
      }
      this.$emit('handleClickConfirm', this.beanName, this.form);
      this.Closed();
    }
  }
}
</script>

<style lang="scss" scoped>
.appendChatDialog {
  .cardSize {
    width: 100%;
    height: 100px;
    &-top {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .item {
        width: 190px;
        height: 100%;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
        .gary {
          opacity: .2;
          pointer-events: none;
        }
        .spanRadio {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.appendChatDialog {
  .el-dialog__header {
    padding: 10px 0 10px 24px;
    background: #F7F8FA;
    border: none;
    margin: 0;
    .el-dialog__title {
      color: #252934;
      font-size: 14px;
      line-height: 22px;
      word-wrap: break-word;
    }
    .el-dialog__headerbtn {
      width: 44px;
      height: 44px;
      top: 0;
      right: 0;
      .el-dialog__close {
        color: inherit;
      }
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form-item {
      margin-bottom: 24px;
    }
    .el-form-item__label {
      font-size: 14px;
      color: #6b798e;
      margin-bottom: 4px !important;
    }
    .el-radio {
      // width: 56px;
      // height: 18px;
      margin-right: 8px;
    }
  }
}
</style>